<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div id="ele1">ele1</div>
<div id="ele2">ele2</div>
<script>
  // 简介: https://segmentfault.com/a/1190000039862872
  // 使用场景: https://www.jianshu.com/p/f698d90836f4
  // Map 的键可以是任意类型; WeakMap 只接受对象作为键（null除外）, 不接受其他类型的值作为键
  // WeakMap 的键是弱引用, 键所指向的对象可以被垃圾回收, 只要外部的引用消失, WeakMap 内部的引用, 就会自动被垃圾回收清除
  // Map 可以被遍历; WeakMap 不能被遍历

  // 使用场景: 注册监听事件的 listener 很适合用 WeakMap 来实现
  // 一旦 dom 对象 ele1, ele2 消失，与它绑定的监听函数 handler1 和 handler2 也会自动消失
  const ele1 = document.getElementById('ele1');
  const ele2 = document.getElementById('ele2');

  const handler1 = (e) => {
    console.log(e.target);
  }
  const handler2 = (e) => {
    console.log(e.target);
  }

  // ele1.addEventListener('click', handler1, false);
  // ele2.addEventListener('click', handler2, false);
 
  const listener = new WeakMap();
 
  listener.set(ele1, handler1);
  listener.set(ele2, handler2);
  
  ele1.addEventListener('click', listener.get(ele1), false);
  ele2.addEventListener('click', listener.get(ele2), false);
</script>
</body>
</html>